import colors from './colors';

const typography = {
  // 字体大小
  sizes: {
    xs: 12,
    sm: 14,
    base: 16,
    lg: 18,
    xl: 20,
    '2xl': 24,
    '3xl': 30,
    '4xl': 36,
    '5xl': 48,
  },

  // 行高
  lineHeights: {
    tight: 1.2,
    normal: 1.5,
    loose: 1.8,
  },

  // 字重
  weights: {
    light: '300' as const,
    normal: '400' as const,
    medium: '500' as const,
    semibold: '600' as const,
    bold: '700' as const,
  },

  // 字体族 (根据实际项目配置)
  fonts: {
    light: 'Lato-Light',
    regular: 'Lato-Regular',
    medium: 'Lato-Medium',
    bold: 'Lato-Bold',
    semibold: 'Lato-SemiBold',
  },

  // 标题样式
  headlines: {
    h1: {
      fontSize: 36,
      fontWeight: '700' as const,
      color: colors.text.heading,
      lineHeight: 42,
    },
    h2: {
      fontSize: 30,
      fontWeight: '600' as const,
      color: colors.text.heading,
      lineHeight: 35,
    },
    h3: {
      fontSize: 24,
      fontWeight: '600' as const,
      color: colors.text.heading,
      lineHeight: 26,
    },
    h4: {
      fontSize: 20,
      fontWeight: '500' as const,
      color: colors.text.heading,
      lineHeight: 23,
    },
    h5: {
      fontSize: 18,
      fontWeight: '500' as const,
      color: colors.text.heading,
      lineHeight: 27,
    },
    h6: {
      fontSize: 16,
      fontWeight: '500' as const,
      color: colors.text.heading,
      lineHeight: 25,
    },
  },

  // 页面标题样式
  title: {
    large: {
      fontSize: 24,
      fontWeight: '700' as const,
      color: colors.text.heading,
      lineHeight: 30,
    },
    medium: {
      fontSize: 20,
      fontWeight: '600' as const,
      color: colors.text.heading,
      lineHeight: 28,
    },
    small: {
      fontSize: 18,
      fontWeight: '600' as const,
      color: colors.text.heading,
      lineHeight: 27,
    },
  },

  // 正文样式
  body: {
    large: {
      fontSize: 18,
      fontWeight: '400' as const,
      color: colors.text.primary,
      lineHeight: 27,
    },
    medium: {
      fontSize: 16,
      fontWeight: '400' as const,
      color: colors.text.primary,
      lineHeight: 25,
    },
    small: {
      fontSize: 14,
      fontWeight: '400' as const,
      color: colors.text.primary,
      lineHeight: 21,
    },
  },

  // 标签样式
  caption: {
    large: {
      fontSize: 16,
      fontWeight: '500' as const,
      color: colors.text.secondary,
      lineHeight: 25,
    },
    medium: {
      fontSize: 14,
      fontWeight: '500' as const,
      color: colors.text.secondary,
      lineHeight: 21,
    },
    small: {
      fontSize: 12,
      fontWeight: '500' as const,
      color: colors.text.secondary,
      lineHeight: 18,
    },
  },
};

export type Typography = typeof typography;

export default typography;